<template>
  <div class="permission-main">
    <a-card :bordered="false">
      <div class="operate">
        <a-button type="dashed" style="width: 100%" icon="plus" @click="doAdd">添加</a-button>
      </div>
      <a-divider />
      <a-table :loading="loading" :columns="columns" :dataSource="loadData" :rowKey="(record,index)=> record.permsId" :pagination="false">
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除吗?"
            @confirm="doDel(record)"
            @cancel="cancel"
            okText="确认"
            cancelText="取消"
          >
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
      <!-- 编辑 -->
      <a-modal title="操作" :width="800" v-model="visible" @ok="handleOk">
        <a-form :form="form">

          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="唯一识别码" >
            <a-input placeholder="唯一识别码" v-model="mdl.uniCode" id="no" />
          </a-form-item>

          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限名称" >
            <a-input placeholder="请输入权限名称" v-model="mdl.permsName" id="permission_name" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="(选填)父权限识别码" >
            <a-select style="width:100%" defaultValue="" v-model="permsParentUniCode" @change="handleChange2" :allowClear="true">
              <a-select-option v-for="(item, index) in permissionList" :key="index" :value="item" >{{ item }}</a-select-option>
            </a-select>
          </a-form-item>

        </a-form>
      </a-modal>
      <!-- 新增弹窗 -->
      <a-modal
        title="新增权限"
        :visible="visible2"
        @ok="handleOk2"
        :width="600"
        :height="500"
        :centered="true"
        @cancel="handleCancel2"
      >
        <a-card title class="card" :bordered="false">
          <div style="margin-bottom: 16px">
            <a-row :gutter="24">
              <a-col :lg="24" :md="24" :sm="24">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                  <span style="width:100px">唯一识别码:</span>
                  <a-input
                    placeholder="请填写唯一识别码!"
                    v-model="uniCode"
                    allowClear
                  />
                </div>
              </a-col>
              <a-col :lg="24" :md="24" :sm="24">
                <div
                  style="display: flex;justify-content: space-between;align-items: center;margin-top:10px"
                >
                  <span style="width:100px;">权限名称:</span>
                  <a-input
                    placeholder="请填写权限名称!"
                    v-model="permsName"
                    allowClear
                  />
                </div>
              </a-col>
              <a-col :lg="24" :md="24" :sm="24">
                <div
                  style="display: flex;justify-content: space-between;align-items: center;margin-top:10px"
                >
                  <span style="width:100px;">父权限识别码:</span>
                  <a-select style="width:100%" defaultValue="" v-model="permsParentUniCode" @change="handleChange" :allowClear="true">
                    <a-select-option v-for="(item, index) in permissionList" :key="index" :value="item" >{{ item }}</a-select-option>
                  </a-select>
                </div>
              </a-col>

            </a-row>
          </div>
        </a-card>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { getPermsList, doAddPermis, delPerms, editPerms } from '@/api/admin/permission'
export default {
  name: 'Permission',
  data () {
    return {
      description: '列表使用场景：后台管理中的权限管理以及角色管理',
      visible2: false,
      visible: false,
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      },
      form: this.$form.createForm(this),
      mdl: {
        uniCode: '',
        permsName: ''
      },
      permsId: '',
      uniCode: '',
      permsName: '',
      permsParentUniCode: undefined,

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '权限名称',
          key: 'permsName',
          width: '400px',
          dataIndex: 'permsName'
        },
        {
          title: '唯一识别码',
          key: 'uniCode',
          dataIndex: 'uniCode'
        },
        // {
        //   title: '可操作权限',
        //   dataIndex: 'actions',
        //   scopedSlots: {
        //     customRender: 'actions'
        //   }
        // }
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      permissionList: [],
      loadData: [],
      loading: false,
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        1: '正常',
        2: '禁用'
      }
      return statusMap[status]
    }
  },
  created () {
    this.getPermsList()
  },
  methods: {
    cancel (e) {
      // console.log(e)
      this.$message.info('取消删除')
    },
    handleChange (value) {
      // console.log(`selected ${value}`)
      this.permsParentUniCode = value
    },
    handleChange2 (value) {
      // console.log(`selected ${value}`)
      this.permsParentUniCode = value
    },
    doDel (record) {
      // console.log(record)
      if (record.children) {
        for (let g = 0; g < record.children.length; g++) {
          this.delPerms(record.children[g].uniCode)
        }
      }
      this.delPerms(record.uniCode)
      this.$message.success('删除成功!')
    },
    delPerms (val) {
      delPerms({ uniCode: val }).then(res => {
        // console.log('权限列表', res)
        this.getPermsList()
      }).catch(err => {
        console.log(err)
        this.$message.error('删除失败!')
      })
    },
    doAddPermis (parameter) {
      doAddPermis(parameter).then(res => {
        // console.log('权限列表', res)
        this.$message.success('新增成功!')
        this.getPermsList()
        this.uniCode = ''
        this.permsName = ''
        this.permsParentUniCode = ''
      }).catch(err => {
        console.log(err)
        this.$message.error('新增失败!')
      })
    },
    getPermsList () {
      this.loading = true
      getPermsList().then(res => {
        this.loading = false
        this.loadData = []
        this.permissionList = []
        // console.log('权限列表', res.result.role)
        for (const i in res.result.role) {
          this.loadData.push(res.result.role[i]) // 属性
          this.permissionList.push(res.result.role[i].uniCode)
          // arr.push(obj[i]); //值
        }
        // console.log('this.loadData', this.loadData)
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    handleOk2 (e) {
      // this.confirmLoading = true
      if (this.uniCode !== '') {
        if (this.permsName !== '') {
          this.visible2 = false
          // this.confirmLoading = false
          this.doAddPermis({
            uniCode: this.uniCode,
            permsName: this.permsName,
            permsParentUniCode: this.permsParentUniCode
          })
        }
      } else {
        this.$message.info('请填写唯一识别码或权限名称!')
        // this.visible2 = false
        // this.confirmLoading = false
      }
      // setTimeout(() => {
      // }, 2000)
    },
    handleCancel2 (e) {
      this.visible2 = false
      this.uniCode = ''
      this.permsName = ''
      this.permsParentUniCode = ''
      // console.log('Clicked cancel button')
    },
    doAdd () {
      this.visible2 = true
      // this.noticeTitle = ''
      // this.noticeDetail = ''
    },
    handleEdit (record) {
      this.mdl.uniCode = ''
      this.mdl.permsName = ''
      // this.mdl = Object.assign({}, record)
      // console.log(record)
      this.permsId = record.permsId
      this.mdl.uniCode = record.uniCode
      this.mdl.permsName = record.permsName
      if (record.parentUniCode) {
        this.permsParentUniCode = record.parentUniCode
      }
      this.visible = true
    },
    handleOk () {
      editPerms({
        permsId: this.permsId,
        uniCode: this.mdl.uniCode,
        permsName: this.mdl.permsName,
        permsParentUniCode: this.permsParentUniCode
      }).then(res => {
        // console.log(res)
        this.visible = false
        this.$message.success('修改成功!')
        this.getPermsList()
      }).catch(err => {
        console.log(err)
        this.$message.error('修改失败!')
        this.visible = false
      })
    },
    onChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    }
  },
  watch: {
  }
}
</script>
<style lang="less" scoped>
  .permission-main::v-deep {
    width: 100%;
    .ant-table-row.ant-table-row-level-1{
    background-color: rgb(252, 252, 252);
    }
  }
</style>
